<html>
<head>

<script type="text/javascript">

/*
* This code is based off of http://vijayk.wordpress.com/2006/12/11/how-to-get-mouse-coordinates-with-javascript/
* and is deisgned to capture a mousedown event which will 
* call getMouseCoordites function each time mouse is clicked.
* but this might be different on a touch screen so we can also
* use: document.onmousemove=getMouseCoordinates;
*/
var divObj;
document.onmousedown=getMouseCoordinates;
//document.onmousemove=getMouseCoordinates;

//assign the mouseCoord Object to divObj
function loadDiv()
{
	divObj = document.getElementById("mouseCoord");
}


/*
*identify which event is supported
* Based on that collect pageX and pageY properties of the event object
* pageX and pageY gets the X and Y cursor coordinates
*/
function getMouseCoordinates(event)
{
	ev = event || window.event;
	CoorTrans(ev.pageX,ev.pageY);
	/*
	//This will
	divObj.innerHTML = "Mouse X:"+ev.pageX + " Mouse Y:"+ev.pageY;
	//change this, 
	<div id="mouseCoord">Mouse Coordinates position will be displayed here.
	</div>
	//if it's put on the page
	*/
	
}

/*
* CoorTrans(x,y) sends information through the CoorTrans iframe
*/
function CoorTrans(x,y){
	try{
	var url = 'CoorTrans.php';
	url = 'CoorTrans.php?x=' + x + '&y=' + y;
	// assign new url to iframe element's src property
	document.getElementById('CoorTrans').src = url;
	}catch(err){
		alert("Error in Coordinate Transfer" + err.toString());
	}
}


/*
* ModeChanger() changes the text in the button calling
* the function (which should only be the ModeChangerButton.
* Then sends information through the ModeChanger iframe.
* The modes are:
* 0 - Standby
* 1 - Test
* 2 - Battle (Autonomous)
* 3 - Remote
*/

function ModeChanger(mode){
	try{
		//sends information
		var url = 'ModeChanger.php?mode=' + mode;

		// assign new url to iframe element's src property
		document.getElementById('ModeChanger').src = url;
		

	/*
		var button = document.getElementById('ModeChangerButton');
		var buttonText = button.value;
		if (buttonText == "Switch to Remote Mode"){
			//change button value
			button.value = "Switch to Autonomous Mode";
			
			//sends information
			var url = 'ModeChanger.php?mode=3';

			// assign new url to iframe element's src property
			document.getElementById('ModeChanger').src = url;
		} else{
			//change button value
			button.value = "Switch to Remote Mode";
			
			//sends information
			var url = 'ModeChanger.php?mode=2';

			// assign new url to iframe element's src property
			document.getElementById('ModeChanger').src = url;
		}
		*/
	}catch(err){
		alert("Error in Coordinate Transfer" + err.toString());
	}
}

/*
This function simply reloads the change mode listener page because it executes 
after each time it recieves a mode change.
*/
function ReloadModeChangeListener(){
	//sends information
	var url = 'ModeChangeListener.php';

	// assign new url to iframe element's src property
	document.getElementById('ModeChangeListener').src = url;
}
</script> 
<style type="text/css">
.radioClass{
/*display: block;*/
//color: black;
}
</style>
</head>
	<body onLoad="loadDiv()" style='margin: 0px;'>
	
	<!-- The video stream -->
	<!-- When moving to the prodcution netbook change the localhost below to 192.168.10.101:8081 -->
	<iframe width='800' height='500' src="http://<?php echo $_SERVER['SERVER_ADDR'] ?>:8081" frameborder='0' style='position:fixed; top: 0; left:0; z-index: -1' >
	</iframe><br />

	<!-- CSS to cover it. The ifram has a fixed position and is therefore removed from the normal page flow, making the image the first thing on the page. Thus it will be about 10px down from the video stream. This can be adjusted via relative positioning -->
	<img src='clear.gif' width='800' height='600' />

	
	
	<br />
	<form >
  <!-- The Modes are:
	* 0 - Standby
	* 1 - Test
	* 2 - Battle (Autonomous)
	* 3 - Remote
	-->
  <input class='radioClass' id='StandbyModeButton' name='mode' type='radio' onclick='ModeChanger(0)' value='Switch to Standy Mode' /><label for="StandbyModeButton"><b>Switch to Standy Mode</b></label><br />
  <input class='radioClass' id='TestModeButton'  name='mode' type='radio' onclick='ModeChanger(1)' value='Switch to Test Mode' /><label for="TestModeButton"><b>Switch to Test Mode</b></label><br />
  <input class='radioClass' id='BattleModeButton'  name='mode' type='radio' onclick='ModeChanger(2)' value='Switch to Battle Mode' /><label for="BattleModeButton"><b>Switch to Battle Mode</b></label><br />
  <input class='radioClass' id='RemoteModeButton'  name='mode' type='radio' onclick='ModeChanger(3)' value='Switch to Remote Mode' /><label for="RemoteModeButton"><b>Switch to Remote Mode</b></label><br />
  <a id='ModeDisplay' ></a>
  </form>
  
  <br /><br /><br />
	
	<!--The Mode Transfer-->
	<!--
		How it works: A button above this iframe will be clicked
		and direct the iframe to point to ModeChanger.php
		-->
	<iframe id="ModeChanger" style='border:0px solid #ccc; width:0; height:0px;'>
	Your browser doesn't support iframes. Cannot display turrets current mode.
	</iframe>
	
	<!--The Coordinate transfer -->
	<!--
		How it works: Javascript will capture mouse events and set the invisible iframe 
		source location dynamically by passing the x and y of the mouse in the URL
		through the get method.
		-->
	<iframe id="CoorTrans" style='border:0px solid #ccc; width:0px; height:0px;'>
	Your browser doesn't support iframes. Cannot transfer coordinates
	</iframe>
	
	<!--The Mode Change Listener-->
	<!--
		How it works: This is an iframe pointing to ModeChangerListener.php
		-->
	<iframe id="ModeChangeListener" src='ModeChangeListener.php' style='border:0px solid #ccc; width:0px; height:0px;'>
	Your browser doesn't support iframes. Cannot recieve mode updates
	</iframe>
	
	
	
	
	
	
	</body>

</html>